<template>
    <div>
        <div class="my-container">

            <div class="my-content">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-list :loading="loading" :finished="finished" finished-text="已经到底了" class="my-list">

                        <div v-for="(item, index) in tableData" :key="index">
                            <div>
                                <div v-if="item.isShowTime" class="my-item-time-div">
                                    <span class="my-item-time">
                                        {{ item.AcceptDate }}
                                    </span>
                                </div>
                                <div class="my-item-cell" @click="gotoDetails(item)">
                                    <div class="my-item-cell-title">
                                        <span class="my-item-cell-title-text">
                                            {{ item.typeEnum.text }}备案
                                        </span>
                                        <span v-if="item.Status == 0" class="my-item-cell-title-status-0">
                                            未提交
                                        </span>
                                        <span v-if="item.Status == 1" class="my-item-cell-title-status-1">
                                            已提交
                                        </span>
                                        <span v-if="item.Status == 2" class="my-item-cell-title-status-2">
                                            备案完成
                                        </span>
                                        <span v-if="item.Status == 3" class="my-item-cell-title-status-3">
                                            备案退回
                                        </span>
                                        <span v-if="item.Status == 4" class="my-item-cell-title-status-4">
                                            备案撤销
                                        </span>
                                        <span>
                                            <van-icon name="arrow" color="#222" class="home-icon" />
                                        </span>
                                    </div>
                                    <div class="my-item-cell-label">
                                        <div>
                                            <span class="my-item-text-title">流水号</span>
                                            <span class="my-item-text-content">{{ item.FilingNumber }}</span>
                                        </div>
                                        <div v-if="item.typeEnum.type != BeiAnTypeEnum.JYBFZ.type">
                                            <span class="my-item-text-title">委托企业</span>
                                            <span class="my-item-text-content">{{ item.DegBranchesName }}</span>
                                        </div>
                                        <div>
                                            <span class="my-item-text-title">备案者</span>
                                            <span class="my-item-text-content">{{ item.BranchesName }}</span>
                                        </div>
                                        <div v-if="item.typeEnum.type == BeiAnTypeEnum.JYBFZ.type">
                                            <span class="my-item-text-title">负责人</span>
                                            <span class="my-item-text-content">{{ item.PrincipalName }}</span>
                                        </div>
                                        <div v-if="item.typeEnum.type == BeiAnTypeEnum.JYBFZ.type">
                                            <span class="my-item-text-title">联系电话</span>
                                            <span class="my-item-text-content">{{ item.LinkmanPhone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import uiUtil from "@/util/UiUtil.js";
import { getBeiAnType, BeiAnTypeEnum } from '@/bean/BeiAnType';
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const props = defineProps({
    dataValue: {
        type: Object,
        default: {}
    },
});

watch(() => props.dataValue, (newShow) => {
    init();
});
onMounted(() => {
    init();
})
const init = () => {
    getData()
}

const onRefresh = () => {
    getData()
}
const getData = async () => {
    await getDataList()
};
const getDataList = async () => {

    const params = {
        ApplyCompanyName: props.dataValue.ApplyCompanyName,
    }
    uiUtil.http().getObj({
        url: uiUtil.urlPath.getAppFilingDetailListBySeedEnterprise,
        data: params,
        start: () => {
            uiUtil.toastLoading()
        },
        succeed: (res) => {
            // loading.value = false;
            // debugger
            // console.log('1ucceed=', res)
            if (!res || !res.code || 200 != res.code) {
                uiUtil.toastFail(res.msg)
                return
            }
            if (!res.data || !res.data) {
                // 如果返回数据为空，表示已加载完成
                finished.value = true;
                uiUtil.toastClose()
                return;
            }
            if (res.data.length > 0) {
                let temp;
                res.data.forEach(item => {
                    if (temp && isDifferenceGreaterThanFiveSeconds(item.AcceptDate, temp)) {
                        item.isShowTime = false;
                    } else {
                        item.isShowTime = true;
                        temp = item.AcceptDate
                    }
                    item.typeEnum = getBeiAnType(item.FilingType)
                })
                tableData.value = res.data
                // console.log('444444444', tableData.value);
            } else {
                tableData.value = []
            }
            uiUtil.toastClose()
        },
        failed: (res) => {
            // debugger
            console.log('failed=', res)
            // showFailToast('添加失败')
            uiUtil.toastFail('添加失败')
        },
        finish: () => {
            uiUtil.toastClose()
            loading.value = false;
        }
    })
};

function isDifferenceGreaterThanFiveSeconds(time1, time2) {
    // 将时间字符串转换为 Date 对象
    const date1 = new Date(time1);
    const date2 = new Date(time2);

    // 计算两个时间的差值，单位是毫秒
    const differenceInMilliseconds = Math.abs(date1 - date2);

    // 转换 5 分钟为毫秒
    const fiveSecondsInMilliseconds = 5 * 60 * 1000;

    // 判断差值是否小于于 5 分钟
    return differenceInMilliseconds < fiveSecondsInMilliseconds;
}


const gotoDetails = (item) => {
    router.push({ path: item.typeEnum.xqpath, query: { id: item.UserFilingID } })
}
</script>

<style scoped>
.my-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.my-header,
.my-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    overflow: auto;
    margin: 0 12px;
}

.my-content {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 12px;
}

.my-list {
    padding-bottom: 100px;
}

.my-item-list {
    margin: 0 12px;
}

.my-item-cell {
    margin: 12px 0 0 0;
    padding: 16px 12px;
    border-radius: 4px;
    background-color: white;
}


.my-item-cell-title {
    display: flex;
    font-size: 13px;
    font-weight: 500;
    color: #222;
    align-items: center;
}

.my-item-cell-title-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #222;
}

.my-item-cell-title-status-0 {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    background-color: #f5f5f5;
    padding: 4px 8px;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    margin-right: 5px;
}

.my-item-cell-title-status-1 {
    font-size: 10px;
    font-weight: 400;
    color: #2A95FF;
    background-color: #e7f6ff;
    padding: 4px 8px;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    margin-right: 5px;
}

.my-item-cell-title-status-2 {
    font-size: 10px;
    font-weight: 400;
    color: #16CE8A;
    background-color: #e7fff6;
    padding: 4px 8px;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    margin-right: 5px;
}

.my-item-cell-title-status-3 {
    font-size: 10px;
    font-weight: 400;
    color: #FF6429;
    background-color: #ffefdf;
    padding: 4px 8px;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    margin-right: 5px;
}

.my-item-cell-title-status-4 {
    font-size: 10px;
    font-weight: 400;
    color: #EEA300;
    background-color: #FFF6E7;
    padding: 4px 8px;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    margin-right: 5px;
}


.my-item-cell-label {
    margin-top: 12px;
    border-radius: 4px;
    background-color: #F9F9F9;
    padding: 16px;
}

.my-item-text-title {
    display: inline-block;
    min-width: 50px;
    font-size: 12px;
    font-weight: 400;
    line-height: 26px;
    color: #888;
}

.my-item-text-content {
    margin-left: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #222;

}

.my-item-time-div {
    margin-top: 12px;
    text-align: center;
}

.my-item-time {
    border-radius: 65px;
    padding: 6px 15px;
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.my-item-cell-btn {
    margin-top: 12px;
    text-align: right;
}

.my-item-cell-btn .van-button {
    height: 36px;
}
</style>